<template>
<div class="wrap">
    <div class="header">
        <img src="/icon/back.png" alt="" class="back" @click="back">
        <span class="title">职位详情</span>
        <img src="/icon/sc.png" alt="" class="start">
    </div>
    <div class="content">
        <div class="top">
            <div class="item">
                <div class="head">
                    <span class="title">{{ content.title }}</span>
                    <span class="salary">{{ content.salary }}</span>
                </div>
                <div class="tag">
                    {{ content.workAddress }}|{{ content.workRange }}|{{ content.education }}
                </div>
                <div class="welfare">
                    <div class="msg" v-for="ele in content.welfare" :key="ele">{{ ele }}</div>
                </div>
                <div class="company">
                    <div class="left">
                        <img :src="companyInfo.logoUrl" alt="" class="logo">
                        <div class="msg">
                            <h2>{{ companyInfo.title }}</h2>
                            <span>{{ companyInfo.companyType }}{{ companyInfo.companyNumber }}</span>
                        </div>
                    </div>
                    <div class="right">
                        <van-button>立即投递</van-button>
                    </div>
                </div>
            </div>
        </div>
        <h2>岗位职责</h2>
        <p>岗位职责:</p>
        <p v-for="item in content.works" :key="item">{{item.title}}</p>
        <h2 class="des">岗位要求</h2>
        <p v-for="item in content.description" :key="item">{{item.title}}</p>
    </div>
    <div class="footer">
        <van-button @click="goChat">立即聊天</van-button>
    </div>
</div>
</template>

<script setup>
import { useRouter} from "vue-router";
import {onMounted, reactive, computed} from "vue";
import { getDetail } from "../../api/home.js";
import {showToast} from "vant";
import { useUserStore } from "../../stores/useUserStore.js";
const user = useUserStore()

const router = useRouter()
console.log(router)
const id = router.currentRoute.value.params.id
const content = reactive({})
const companyInfo = computed(() => {
    return content.companyInfo && content.companyInfo[0] || {}
})
onMounted(async ()=>{
    const res = await getDetail({workid:id})
    Object.assign(content, res.data)
})

const back = ()=>{
    router.push({
        path:router.currentRoute.value.query.redirect
    })
}
const goChat = ()=>{
    if(!user.token){
        showToast('请先登录!')
        router.push({
            path:'/login',
            query:{redirect: router.currentRoute.value.fullPath}
        })
    }
}
</script>

<style scoped lang="less">
  .wrap{
    width: 100%;
    height: 100%;
    position: relative; 
    .header{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 46px;
          background-color: #149639;
          color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding:0px 15px;
          .title{
              font-size: 16px;
          }
          .back{
              width: 20px;
          }
          .start{
              width: 20px;
          }
      }
    .content{
        height: calc(100vh - 50px);
        //background-color: #000;
        padding: 61px 15px 0px;
        overflow-y:auto ;
        .top{
            .item{
                margin-bottom: 30px;
                padding: 15px 15px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
                .head{
                    height: 18px;
                    display: flex;
                    justify-content: space-between;

                    font-size: 18px;
                    .salary{
                        color:#149639;
                    }
                }
                .tag{
                    margin: 10px 0px 14px;
                    font-size: 12px;
                    color:#666;
                }
                .welfare{
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 15px;
                    .msg{
                        font-size: 14px;
                        color:#666;
                        padding: 10px 7px;
                        margin:0px 5px 5px 0px;
                        background-color: #f4f4f4;
                    }
                }
                .company{
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    .left{
                        display: flex;

                        .logo{
                            height: 30px;
                            margin-right: 8px;
                        }
                        h2{
                            font-size: 12px;
                            color:#333;
                            margin-bottom: 6px;
                        }
                        span{
                            font-size: 9px;
                            color:#666;
                        }
                    }
                    .right{
                        .van-button{
                            color: #149639;
                            border-color: #149639;
                            height: 28px;
                            width: 68px;
                            border-radius:14px;
                            padding: 0;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        h2{
            margin-bottom: 20px;
            color: #333;
            &.des{
                margin-top: 20px;
            }
        }
        p{
            color: #999;
            font-size: 12px;
            line-height: 2;
        }
    }
    .footer{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      z-index: 99999;
      padding: 0px 15px;
      .van-button{
        width: 100%;
        height: 40px;
        border-radius:20px;
        background-color: #149639;
        margin-bottom: 10px;
          color: #fff;
      }
    }
  }
</style>